<!DOCTYPE html>
<html>
    <head>
        <title>media controls adjust for zoom when filling the bar</title>
        <script src="../resources/testharness.js"></script>
        <script src="../resources/testharnessreport.js"></script>
        <script src="media-controls.js"></script>
        <script src=media-file.js></script>
        <style>
          body { zoom: 500%; }
        </style>
    </head>
    <body onload="async_test(testTimelineVisible)">
        <video id="video" width="300px" controls></video>
        <script>
        var element = document.getElementById("video");
        element.src = "content/counting.ogv";

        function testTimelineVisible(test) {
          // Check that the timeline is shown.  If zoom is not accounted for,
          // then it will be considered 500% bigger, and will be dropped.
          var timeline = mediaControlsButton(element, "timeline");
          assert_true(getComputedStyle(timeline).display != "none",
              "timeline should not be hidden while zoomed");
          test.done();
        }
        </script>
        </video>
    </body>
</html>
